import React from 'react';
import Taro from '@tarojs/taro';
import { View, Button } from '@tarojs/components'
import { connect } from 'react-redux'
import { carInfo } from '@/store/car/action'
import { getAccessId } from '@/store/user/action'
import { loginMethod } from '@/utils/login'
import { fetchSetDefault } from '@/api/car'
import CarView1 from './CarView1'
import CarView2 from './CarView2'
import CarView3 from './CarView3'
import CarView4 from './CarView4'

import './index.scss'

interface State {
  carInfo: ICar | null
  unionid: string,
}

interface Props {
  styleView?: number | string
	extra?:any | object
}

@connect<any>(({ car, user }) => ({
  car, user
}), _dispatch => ({
  dispatchFetchList() {
    return _dispatch(carInfo())
  },
  dispatchUserInfo(params) {
    return _dispatch(getAccessId(params))
  }
}))
export default class CarInfo extends React.Component<any, State, Props> {
  constructor (prop) {
    super(prop)
    const { user } = this.props
    let unionid = ''
    if (user.userInfo.unionid) {
      unionid = user.userInfo.unionid
    }
    this.state = {
      carInfo: null,
      unionid
    }
  }

  componentDidMount() {
    const {
      currentCar
    } = this.props.car.carInfo
    // if (currentCar) {
    //   this.setState({
    //     carInfo: currentCar
    //   })
    // } else {
    const { user } = this.props
    if (user.userInfo.unionid) {
      this.setState({
        unionid: user.userInfo.unionid
      })
    }
    if (user.userInfo.accessId) {
      this.getCarInfo()
    }
    // }
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const { user } = nextProps
    // 只有登录才可以设置车辆信息console.log();
    if (user.userInfo.accessId) {

      if (nextProps.car) {
        const {
          currentCar
        } = nextProps.car.carInfo
        if (!this.state.carInfo) {
          this.setState({
            carInfo: currentCar,
            unionid: user.userInfo.unionid
          })
        } else {
          if (currentCar) {
						this.setState({
              carInfo: currentCar
            })
            // if (this.state.carInfo.id !== currentCar.id) {
            //   this.setState({
            //     carInfo: currentCar
            //   })
            // }
          } else {
            this.setState({
              carInfo: currentCar
            })
          }
        }
      } else {
        this.setState({
          carInfo: nextProps.carInfo
        })
      }
    } else {
      this.setState({
        carInfo: null,
        unionid: ''
      })
    }
  }

  userInfo = (e) => {
    const { target } = e
    if (target.errMsg === 'getUserInfo:ok') {
      const { dispatchUserInfo } = this.props
      dispatchUserInfo(e.detail).then(res => {
        // console.log(this.props)
        const { userInfo } = this.props.user
        if (!userInfo.userId) {
          loginMethod()
        } else {
          // 获取车辆列表信息
          this.getCarInfo()
          Taro.showToast({
            title: '登录成功',
            icon: 'none',
            duration: 1800
          })
        }
        this.setState({
          unionid: userInfo.unionid
        })
      })
    }
  }

  // 获取车辆列表信息
  getCarInfo = () => {
    const {
      dispatchFetchList
    } = this.props
    let carId = Taro.getStorageSync('SCAN_CAR_ID')
    console.log('carId', carId)
    dispatchFetchList().then(res => {
      let { currentCar = null } = res
      if (!currentCar && carId) {
        fetchSetDefault(carId).then(() => {
          dispatchFetchList().then(innerRes => {
            const data = innerRes.currentCar
            this.setState({
              carInfo: data
            })
          })
        }).catch(err => {
          console.log('err', err)
        })
      }
    })
  }

  isView = (styleNumber?) => {
    const { carInfo } = this.state
    const isNumber = typeof styleNumber === 'number' || typeof styleNumber === 'string'
    const { disabled, loaded,extra } = this.props
    return (
      <View className='car-show'>
        {
          isNumber ? (
						styleNumber == 4 ? <CarView4 disabled={disabled} loaded={loaded} extra={extra} carInfo={carInfo} /> :
            styleNumber == 2 ? <CarView2 disabled={disabled} loaded={loaded} carInfo={carInfo} /> :
              (styleNumber == 3 ? <CarView3 disabled={disabled} loaded={loaded} carInfo={carInfo} /> : <CarView1 disabled={disabled} loaded={loaded} carInfo={carInfo} />)
          ) : <CarView1 disabled={disabled} loaded={loaded} carInfo={carInfo} />
        }
      </View>
    )
  }

  render() {
    // eslint-disable-next-line no-shadow
    const { styleView } = this.props
    console.log('styleView', styleView)
    const { carInfo } = this.state
    const { unionid } = this.state
    return (
      <View className='car'>
        {/* 仅仅针对微信小程序 */}
        {!unionid && process.env.TARO_ENV === 'weapp' && <Button type='default' openType='getUserInfo' onGetUserInfo={this.userInfo.bind(this)} className='getuserinfo'></Button>}
        {
          this.isView(styleView)
        }
      </View>
    )
  }
}
